<template>
    <div :style="carStyle" @click="gotoUrl(obj)" ref="curentView">
        <i :class="obj.iconClass" :style="figureStyle"></i>

        <!-- 兼容老数据 -->
        <template v-if="obj.group == 1">
            <i class="iconfont icon-24gl-square" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-24gf-square" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 2">
            <i class="iconfont icon-big-circle" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-yuan" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 3">
            <i class="iconfont icon-xingzhuang-sanjiaoxing" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-zheng-triangle" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 4">
            <i class="iconfont icon-wujiaoxing" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-star" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 5">
            <i class="iconfont icon-lingxing1" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-lingxing" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 6">
            <i class="iconfont icon-tx-tixing" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-tixing1" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 7">
            <i class="iconfont icon-pentagon" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-wubianxing1" v-else :style="figureStyle"></i>
        </template>
        <template v-if="obj.group == 8">
            <i class="iconfont icon-hexagon" v-if="obj.isNull" :style="figureStyle"></i>
            <i class="iconfont icon-liubianxing2" v-else :style="figureStyle"></i>
        </template>
    </div>
</template>

<script>
// 图形
export default {
    Name: "Figure",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        computedDiscount: Function,
        gotoUrl: Function,
    },
    data() {
        return {
            figureStyle: {},
            carStyle: {},
        }
    },
    created() {
        var slef = this;
        this.$nextTick(() => {
            slef.setStyle();
        })
    },
    methods: {
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            // alert(this.$refs.curentView.clientWidth)
            // var width = this.$refs.curentView.clientWidth;
            var width = style.width;
            // alert(width)
            // var height = this.$refs.curentView.clientHeight;
            // alert(height);
            this.carStyle = {
                whiteSpace: "pre",
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: "center",
                alignItems: "center",
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
                boxShadow,
                overflow: 'hidden',
                position: 'relative'
            }

            this.figureStyle = {
                fontSize: this.obj.size + "px",
                color: this.obj.color,
                // transformOrigin: "center center",
                // transform: `rotate(${this.obj.rotate}deg)`
            }

            // #region 文字投影
            var textShadow = "";
            if (this.obj.textShadow) {
                textShadow = `${this.obj.textShadow.h}px ${this.obj.textShadow.v}px ${this.obj.textShadow.blur}px ${this.obj.textShadow.color}`
            }
            this.figureStyle.textShadow = textShadow;
            // #endregion

            if (this.isEdit == false && this.obj.contactType > 0) {
                this.figureStyle.cursor = "pointer";
            }
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
            }
        }
    },
}
</script>